<template>
  <div class="tabbox">
    <div class="tab" :class="{active: currentIndex==index }" @click="$emit('deliverIndex',index)" v-for="(item,index) in tabs" :key="index">{{item.tabName}}"</div>
  </div>
</template>

<script>
export default {
props:{
    tabs:{type:Array,default:[]},
    currentIndex:{type:Number,default:0}
}
}
</script>

<style lang='scss' scoped>
.tabbox{
  width: 60px;
  text-align: center;
}
.tabbox .tab{
  margin: 15px 0;
  border-left: 3px solid transparent;
}
.tabbox .tab.active{
  font-weight: bold;
  border-left: 3px solid red;
}

</style>